<template>
  <ConfigProvider :locale="getAntdLocale" v-if="reload">
    <AppProvider>
      <RouterView />
    </AppProvider>
  </ConfigProvider>
</template>

<script lang="ts" setup>
  import { ConfigProvider, message } from 'ant-design-vue';
  import { AppProvider } from '@/components/Application';
  import { useTitle } from '@/hooks/web/useTitle';
  import { useBodyClass } from '@/hooks/web/useBodyClass';
  import { useLocale } from '@/locales/useLocale';

  import 'dayjs/locale/zh-cn';
  import { onUnmounted, provide, ref, watch } from 'vue';
  import { useAppStore } from '/@/store/modules/app';
  import { socketClient } from '/@/utils/socket';
  import { useUserStore } from '/@/store/modules/user';
  import { MenuModeEnum, MenuTypeEnum } from './enums/menuEnum';

  import { usePermissionStore } from '/@/store/modules/permission';
  import { useTimezoneStore } from './store/modules/timezone';

  const permissionStore = usePermissionStore();

  // support Multi-language
  const { getAntdLocale } = useLocale();

  message.config({
    duration: 3,
    maxCount: 1,
  });
  const reload = ref(true);
  const setReload = async () => {
    reload.value = false;
    await permissionStore.buildRoutesAction();
    setTimeout(() => {
      reload.value = true;
    }, 111);
  };
  provide('setReload', setReload);
  const appStore = useAppStore();
  const userStore = useUserStore();
  const info = userStore.getUserInfo;

  const getServerDate = () => {
    const { setServerDateStore } = useTimezoneStore();
    const baseUrl = '';
    fetch(baseUrl + `/date?t=${Date.now()}`, { method: 'HEAD' })
      .then(function (res) {
        const serverDate = res.headers.get('date');
        if (!serverDate) {
          console.error('Server did not return the Date header');
          return;
        }
        setServerDateStore(serverDate);
      })
      .catch(function (err) {
        console.error('Failed to fetch server date:', err);
      });
  };
  getServerDate();
  setInterval(() => {
    getServerDate();
  }, 1000 * 60 * 30);

  watch(
    () => appStore.getMqttIsConnected,
    () => {
      socketClient.addSubscribe(`${info['prefix']}/merchant/notice`);
      socketClient.addSubscribe(`${info['prefix']}/merchant/promo/pending`);
      socketClient.addSubscribe(`${info['prefix']}/merchant/balance`);
      socketClient.addSubscribe(`${info['prefix']}/notification/deposit`);
      socketClient.addSubscribe(`${info['prefix']}/common`);
      socketClient.addSubscribe(`/zk/currency/status`);
    },
  );
  onUnmounted(() => {
    socketClient.removeSubscribe(`${info['prefix']}/merchant/notice`);
    socketClient.removeSubscribe(`${info['prefix']}/merchant/promo/pending`);
    socketClient.removeSubscribe(`${info['prefix']}/merchant/balance`);
    socketClient.removeSubscribe(`${info['prefix']}/notification/deposit`);
    socketClient.removeSubscribe(`${info['prefix']}/common`);
    socketClient.removeSubscribe(`/zk/currency/status`);
  });
  sessionStorage.setItem('detailsMember', '');
  // Listening to page changes and dynamically changing site titles
  useTitle();
  useBodyClass();
  appStore.setProjectConfig({
    menuSetting: {
      mode: MenuModeEnum.INLINE,
      // Menu type
      type: MenuTypeEnum.MIX,
      split: true,
      // type: 'mix',
    },
  });
</script>

<style lang="less">
  @import './assets/font/font.css';
  @import './design/custom.less';

  body {
    background-color: #011024;
  }

  .custom-body-zh_CN {
    font-family: PingFangSC-Regular, sans-serif, AlimamaFangYuanTiVF-Thin;
  }
</style>
